// var
@imageupload-prefix-cls   : x-image-upload;
@imageupload-color-bg     : #def0ff;
@imageupload-color-border : #ededed;
@imageupload-color-btn    : #5bcbf4;
@imageupload-font-size    : 14px;
@imageupload-font-color   : #666;

// mixins

// styles - default
.@{imageupload-prefix-cls} {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  &__case_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  &__default {
    width: 100%;
    height: 100%;
    border: 2px solid @imageupload-color-border;
    border-radius: 6px;
    background-color: #fff;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 12px;
      right: 12px;
      bottom: 12px;
      border-radius: 6px;
      background-color: @imageupload-color-bg;
    }
  }
  &__btn {
    .absolute-transform-center;
    z-index: 2;
    width: 60%;
    cursor: pointer;
    &_icon {
      .xvu-iconfont {
        width: @imageupload-font-size * 3;
        height: @imageupload-font-size * 3;
        margin: auto;
        border-radius: 50%;
        background-color: @imageupload-color-btn;
        font-size: @imageupload-font-size * 1.6;
        color: #fff;
        .flex-center;
        &.xvu-plus {
          font-weight: 600;
        }
      }
    }
    &_label {
      font-size: @imageupload-font-size;
      color: @imageupload-font-color;
      line-height: 2;
      letter-spacing: .25em;
    }
  }
}

// styles - more
